/**
 *
 * @param {String} method 请求方式  需要大写
 * @param {String} url    请求地址  协议（http）+ 域名+ 端口号 + 路径
 * @param {String} data   请求数据  key=value&key1=value1
 * @param {Function} cb     成功的回调函数
 * @param {Boolean} isAsync 是否异步 true 是异步  false 代表同步
 */
function ajax(method, url, data, cb, isAsync) {
    // get   url + '?' + data
    // post
    var xhr = null;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

    // xhr.readyState    1 - 4  监听是否有响应
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                cb(JSON.parse(xhr.responseText));
            }
        }
    };
    method = method.toUpperCase();
    if (method == "GET") {
        xhr.open(method, url + "?" + data, isAsync);
        xhr.send();
    } else if (method == "POST") {
        xhr.open(method, url, isAsync);
        // key=value&key1=valu1
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(data);
    }
}

// 表格数据
var tableData = [];

//binEvent 绑定事件函数
function bindEvent() {
    //左侧菜单栏的点击事件 获取菜单区域
    var leftMean = document.querySelector(".left-mean");
    leftMean.onclick = function (e) {
        //e事件委托
        //ddNode： 当前点击的导航对应的dd元素节点 因为e取出来是a标签 parentNode 父节点
        var ddNode = e.target.parentNode;
        //tagName是标签名 标签名取出来都是大写
        if (ddNode.tagName === "DD") {
            //移除所以的mean-active
            removeClass(ddNode.parentNode.children, 'mean-active');
            //设置当前的className
            ddNode.className = 'mean-active';
        }
    }

    //新增学生按钮 点击行为
    var studentAddBtn = document.getElementById('student-add-btn');
    studentAddBtn.onclick = function (e) {
        //阻止刷新界面的默认行为
        e.preventDefault();
        //获取from表单dom
        var from = document.getElementById("student-add-form");
        //获取表单虾米拿到数据并且效验数据
        var formData = getFormData(from);

        if (formData.status === "success") {
            //学生的信息
            var data = formData.data;
            //成功后
            success(data,'新增成功','/api/student/addStudent','get');
            //重新拉取页面数据
            getTableData();
            from.reset();

        } else {
            alert(formData.msg)
        }
    }

    //登录功能
    var studentLoginBtn = document.getElementById("student-login-btn");
    studentLoginBtn.onclick = function (e) {
        e.preventDefault();
        //获取表单数据
        var formLogin = document.getElementById("student-login-form");
        loginForm(formLogin)
        formLogin.reset();
    }


    //注册功能
    var studentRegisterbtn = document.getElementById("student-register-btn");
    studentRegisterbtn.onclick = function (e) {
        e.preventDefault();
        var form = document.getElementById("student-register-form");
        var formData = registerForm(form);
        //如果状态码是success 则证明成功登陆
        if (formData.status === "success"){
            //获取里面的数据
            var data = formData.data;

            //登陆成功方法
            success(data,"注册成功",'/api/student/stuRegister','post');
            form.reset();
        }else{
            alert(formData.msg)
        }
    }






    //编辑删除功能
    var tBody = document.querySelector('#studnt-list table tbody');
    var modal = document.querySelector('#studnt-list .modal');
    //编辑点击事件
    tBody.onclick = function (e) {
        //判断点击的标签名
        if (e.target.tagName === 'BUTTON') {
            //获取当前标签身上的自定义属性data-index 的方法：getAttribute()
            var index = e.target.dataset.index;
            // 判断当前按钮是不是编辑按钮
            if (e.target.classList.contains('edit')) {
                //拿到学视数据 并渲染
                renderEditForm(tableData[index]);
                //显示弹窗
                modal.style.display = 'block';
            } else {
                var student = tableData[index];
                var isDel = confirm('确认删除学号为:' + student.sNo + '的学生信息嘛？');
                if (isDel) {
                    tranferData({
                        method: "get",
                        url: '/api/student/delBySno',
                        data: 'sNo=' + student.sNo + '&',
                        success: function () {
                            alert('删除成功');
                            getTableData();
                        }
                    })
                }
            }

        }
    }

    modal.onclick = function (e) {
        if (e.target === this) {
            modal.style.display = 'none';
        }
    }

    //修改学视信息
    var studentEditBtn = document.getElementById('student-edit-btn');
        studentEditBtn.onclick = function (e) {
            //阻止刷新界面的默认行为
            e.preventDefault();
            //获取from表单dom
            var from = document.getElementById("student-edit-form");
            //获取表单虾米拿到数据并且效验数据
            var formData = getFormData(from);

            if (formData.status === "success") {
                //学生的信息
                var data = formData.data;
                //当前学生信息数据转换成字符串的结构
                var dataStr = "";
                for (var prop in data) {
                    //拼接成这样
                    //index.js:74 name=zhoujiangyun564&sex=0&email=145798950@qq.com&sNo=12344&birth=2000&address=dsfds&phone=18874401025&
                    dataStr += prop + '=' + data[prop] + '&';
                }
                //提交给后套保存学生信息
                tranferData({
                    method: 'get',
                    url: '/api/student/updateStudent',
                    data: dataStr,
                    success: function (res) {
                        alert('修改成功');
                        //重新刷新数据
                        getTableData();
                        modal.style.display = "none";
                    }
                });
                from.reset();
            } else {
                alert(formData.msg)
            }
        }
}

// removeClass: 移除类名    nodeList: 节点列表  className： 要移除的类名
function removeClass(nodeList, className) {
    for (var i = 0; i < nodeList.length; i++) {
        nodeList[i].classList.remove(className);
    }
}

window.onload = function () {

    bindEvent();
    hashToMeanu();
    // 浏览器的地址栏中 hash值变化
    window.onhashchange = function () {
        hashToMeanu();
    }
}

//hashToMenu： 由hash值 对应左侧导航
function hashToMeanu() {
    //判断进入页面的时候 是否有指定导航 如果有则定位到那个位置
    //BOM中讲过
    if (location.hash) {
        //获取地址栏中hash的值 锚点对应的值
        var hashName = location.hash;
        //当前要定位的菜单元素 并且获取带有这个定位的a标签
        var activeMean = document.querySelector('.left-mean dd a[href="' + hashName + '"]');
        //手动触发元素的点击事件
        activeMean.click();
    } else {
        var activeMean = document.querySelector('.left-mean dd a[href="#studnt-list"]');
        activeMean.click();
    }
}


//获取学生的表单数据函数 返回对象{data：学生数据, status:状态码 msg：消息}
function getFormData(form) {
    var name = form.name.value;
    var sex = form.sex.value;
    var email = form.email.value;
    var sNo = form.sNo.value;
    var birth = form.birth.value;
    var address = form.address.value;
    var phone = form.phone.value;

    //最终返回的数据
    var result = {
        data: {},
        status: "success",
        msg: ""
    };

    //但愿表格是否全部填写
    if (!name || !email || !sNo || !birth || !address || !phone) {
        result.status = 'fail';
        result.msg = '信息填写不全，请校验后提交';
        return result;
    }

    // 判断邮箱的格式 11111@qq.com   meiqi.dong@duyi-inc.com
    // emailReg: 邮箱正则表达式
    var emailReg = /^[\w\.-_]+@[\w-_]+\.com$/
    if (!emailReg.test(email)) {
        result.status = 'fail';
        result.msg = '邮箱格式不正确';
        return result;
    }
    // 判断学号的规则：  4 - 16位数字
    var sNoReg = /^\d{4,16}$/;
    if (!sNoReg.test(sNo)) {
        result.status = 'fail';
        result.msg = '学号应为4-16位有效数字';
        return result;
    }
    // 出生年份的校验 1975 - 2020
    if (birth < 1975 || birth > 2020) {
        result.status = 'fail';
        result.msg = '出生年份不正确';
        return result;
    }

    // 手机号的校验
    var phoneReg = /^1[3456789]\d{9}$/;
    if (!phoneReg.test(phone)) {
        result.status = 'fail';
        result.msg = '手机号码不正确';
        return result;
    }

    result.data = {
        //es6写法 就相当于name：name
        name,
        sex,
        email,
        sNo,
        birth,
        address,
        phone
    }
    return result;
}

// 封装一个调用ajax函数的方法
/**
 *
 * @param {Object} options
 *         method: 请求方式
 *          url: 请求路径
 *          data: 请求数据  (数据是不包含appkey的)
 *          success： 请求成功之后的回调函数  即后台成功处理我的数据的时候要做的总能
 *
 */

function tranferData(options) {
    ajax(options.method || 'GET', 'http://open.duyiedu.com' + options.url, options.data + 'appkey=Iris_1610210437874',
        function (res) {
            if (res.status === 'fail') {
                alert(res.msg);
            } else {
                options.success(res.data);
            }
        }, true)
}

//获取表格数据
function getTableData() {
    tranferData({
        method: 'get',
        url: '/api/student/findAll',
        data: '',
        success: function (res) {
            tableData = res;
            renderTable(res);
        }
    })
}

getTableData();

//渲染页面
function renderTable(data) {
    var str = data.reduce(function (pre, ele, index) {
        //pre表示要要返回的数据
        return pre + `<tr>
    <!-- td: 列 -->
    <td>${ele.sNo}</td>
    <td>${ele.name}</td>
    <td>${ele.sex == 0 ? '男' : '女'}</td>
    <td>${ele.email}</td>
    <td>${new Date().getFullYear() - ele.birth}</td>
    <td>${ele.phone}</td>
    <td>${ele.address}</td>
    <td>
        <!-- edit: 编辑   operation-btn: 操作-按钮 -->
        <button class="operation-btn edit" data-index="${index}">编辑</button>
        <button class="operation-btn remove" data-index="${index}">删除</button>
    </td>
</tr>`;
    },"")
    var tbody = document.querySelector('#studnt-list table tbody');
    tbody.innerHTML = str;
}

//渲染弹窗
function renderEditForm(data) {
    var form = document.getElementById('student-edit-form');
    //遍历学生信息
    for (var prop in data){
        if (form[prop]){
            form[prop].value = data[prop];
        }
    }
}

//获取数据并且登录
function loginForm(form){
    var account  = form.account.value;
    var password = form.password.value;
    var data = {
        account,
        password
    }
    // var str = "";
    // for (var prop in data){
    //     str += prop + "=" + data[prop] + "&";
    // }
    // console.log(str);
    //
    // tranferData({
    //     method:"post",
    //     url:"/api/student/stuLogin",
    //     data:str,
    //     success:function (res) {
    //         alert("登陆成功")
    //     }
    // })
    success(data,"登陆成功","/api/student/stuLogin","post");
}


//注册功能
function registerForm(form){
    var account = form.account.value;
    var username = form.username.value;
    var password = form.password.value;
    var rePassword = form.rePassword.value;

    //最终返回的数据
    var result = {
        data:"",
        status:"success",
        msg:""
    }
    //判断值是否为空
    if (!account || !username || !password || !rePassword){
        result.status = "fail";
        result.msg = '数据填写不完整';
        return  result;
    }
    //判断两次密码是否一致
    if (password!=rePassword){
        //如果错误直接返回fail 并且不返回数据
        result.status = 'fail';
        result.msg = '两次密码不一致';
        return result;
    }

    //如果上面都没有返回证明通过验证了 直接返回数据
    result.data={
        account,
        username,
        password,
        rePassword
    }
    return result;

}


//封装登陆成功  data数据 msg弹窗 url请求地址  method请求方式
function success(data,msg,url,method){
    var str = "";
    for (var prop in data){
        str += prop + "=" + data[prop] + "&";
    }
    tranferData({
        method:method,
        url:url,
        data:str,
        success:function (res) {
            alert(msg)
        }
    })
}
